﻿

:root{
    --primaryColor:#fff;
    --navColor1:#21292c;
    --navColor2:#aa3e39;
    --navColor3:#aa6e39;
    --navColor4:#236267;
    --navColor5:#2c8437;
}

html{
    box-sizing: border-box;
}

body{
    margin:0;
    background: #000;
    font-family: sans-serif;
}

/* Navigation Menu */


/* Overlay */
.overlay{
    position: fixed;
    z-index: 9;
    top:0;
    left:0;
    width:100vw;
    height: 100vh;
    background-color: rgba(0,0,0,0.7);
    transform: translateX(-100vw);
}

.overlay-slide-right{
    transition: all 0.4s ease-in-out;
    transform:translateX(0);
}

.overlay-slide-left{
    transition: all 0.8s ease-in-out;
    transform:translateX(-100vw);
}

/* Nav Menu Items */
nav,
nav ul{
    height: 100vh;
    margin:0;
    padding:0;
}

nav ul {
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    list-style: none;
}

nav ul li{
    height: 20%;
    overflow: hidden;
}

nav li a{
    position: relative;
    top:45%;
    color:#fff;
    text-transform: uppercase;
    letter-spacing: 4px;
    text-decoration: none;
    display: block;
    text-align: center;
}

nav li a:hover{
    transform: scale(1.2);
}

nav li a::before{
    content:"";
    width:25vw;
    height: 3px;
    background-color: #fff;
    position: absolute;
    top:47.5%;
    left:0;
    opacity: 0;
}

nav li a:hover::before {
    opacity: 1;
}

nav li:nth-of-type(1){
    background-color: var(--navColor1);
}

nav li:nth-of-type(2){
    background-color: var(--navColor2);
}

nav li:nth-of-type(3){
    background-color: var(--navColor3);
}

nav li:nth-of-type(4){
    background-color: var(--navColor4);
}

nav li:nth-of-type(5){
     background-color: var(--navColor5);
 }


.slider-in-1{
    animation: slide-in 0.4s linear 0.2s both;
}

.slider-in-2{
    animation: slide-in 0.4s linear 0.4s both;
}

.slider-in-3{
    animation: slide-in 0.4s linear 0.6s both;
}

.slider-in-4{
    animation: slide-in 0.4s linear 0.8s both;
}

.slider-in-5{
    animation: slide-in 0.4s linear 1s both;
}

@keyframes slide-in {
    from{
        transform:translateX(-100%);
    }

    to{
        transform:translateX(0);
    }
}



.slider-out-1{
    animation: slide-out 0.3s linear 0.5s both;
}

.slider-out-2{
    animation: slide-out 0.3s linear 0.4s both;
}

.slider-out-3{
    animation: slide-out 0.3s linear 0.3s both;
}

.slider-out-4{
    animation: slide-out 0.3s linear 0.2s both;
}

.slider-out-5{
    animation: slide-out 0.3s linear 0.1s both;
}

@keyframes slide-out{
    from{
        transform:translateX(0);
    }

    to{
        transform:translateX(-100%);
    }

}


/* Menu Bars */
.menu-bars{
    position: fixed;
    top:1rem;
    right:1.2rem;
    z-index: 10;
    display: inline;
    cursor: pointer;
}

.bar1,
.bar2,
.bar3{
    width:35px;
    height: 2px;
    background-color: #fff;
    margin:8px 0;
    transition: 0.4s;
}

.change .bar1{
    transform:rotate(-45deg) translate(-7px,8px);
}

.change .bar2{
    opacity: 0;
}

.change .bar3{
    transform: rotate(45deg) translate(-6px,-8px);
}

/* Sections */
section{
    width:100%;
    height: 100vh;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    letter-spacing: 2px;
    color:var(--primaryColor);
}

section#home{
    background-image: url("https://images.unsplash.com/photo-1512403754473-27835f7b9984?q=80&w=830&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
    background-size: cover;
    background-position: center center;
}

section#home a{
    position: absolute;
    z-index: 2;
    top:1.5rem;
    left:1.5rem;
    text-decoration: none;
    font-size: 0.8rem;

}

section#about{
    background-color: var(--navColor2);
}

section#skills{
    background-color: var(--navColor3);
}

section#projects{
    background-color: var(--navColor4);
}

section#contact{
    background-color: var(--navColor5);
}